import React, { Component } from 'react'
import { Form, Icon, Input, Button, Checkbox, Card } from 'antd';
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { login } from '../../actions/user'
import './login.less'
const mapState = state => ({
    isLogin: state.user.isLogin,
    isLoading: state.user.isLoading
})

@connect(mapState, { login })
@Form.create()
class Login extends Component {
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log(values)
            if (!err) {
                this.props.login(values)
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <>
                <div class='login'>
                    <div class='login_title'>
                        <span>管理员登录</span>
                    </div>
                    <div class='login_fields'>
                        <div class='login_fields__user'>
                            <div class='icon'>
                                <img alt="" src='img/user_icon_copy.png'>
	      </div>
                                <input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" />
                                <div class='validation'>
                                    <img alt="" src='img/tick.png'>
	        </div>
                                </div>
                                <div class='login_fields__password'>
                                    <div class='icon'>
                                        <img alt="" src='img/lock_icon_copy.png'>
	      </div>
                                        <input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
                                            <div class='validation'>
                                                <img alt="" src='img/tick.png'>
	      </div>
                                            </div>
                                            <div class='login_fields__password'>
                                                <div class='icon'>
                                                    <img alt="" src='img/key.png'>
	      </div>
                                                    <input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
                                                        <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                                                            <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                                                        </div>
	    </div>
                                                    <div class='login_fields__submit'>
                                                        <input type='button' value='登录'>
	    </div>
                                                    </div>
                                                    <div class='success'>
                                                    </div>
                                                    <div class='disclaimer'>
                                                        <p>欢迎登陆后台管理系统</p>
                                                    </div>
                                                </div>
                                                <div class='authent'>
                                                    <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
                                                        <div class="loader-inner ball-clip-rotate-multiple">
                                                            <div></div>
                                                            <div></div>
                                                            <div></div>
                                                        </div>
                                                    </div>
                                                    <p>认证中...</p>
                                                </div>
                                                <div class="OverWindows"></div>
            </>
            // this.props.isLogin
            //     ?
            //     <Redirect to='/admin' />
            //     :
            //     <div className='background-img'>

                                                //         <Card
            //             title="登录"
            //             className="login-wrapper"
            //         >
            //             <Form onSubmit={this.handleSubmit} className="login-form">
            //                 <Form.Item>
            //                     {getFieldDecorator('username', {
            //                         rules: [{ required: true, message: '用户名必须' }],
            //                     })(
            //                         <Input
            //                             disabled={this.props.isLoading}
            //                             prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
            //                             placeholder="用户名"
            //                         />,
            //                     )}
            //                 </Form.Item>
            //                 <Form.Item>
            //                     {getFieldDecorator('password', {
            //                         rules: [{ required: true, message: '密码必须' }],
            //                     })(
            //                         <Input
            //                             disabled={this.props.isLoading}
            //                             prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
            //                             type="password"
            //                             placeholder="密码"
            //                         />,
            //                     )}
            //                 </Form.Item>
            //                 <Form.Item>
            //                     {getFieldDecorator('remember', {
            //                         valuePropName: 'checked',
            //                         initialValue: true,
            //                     })(<Checkbox disabled={this.props.isLoading}>记住我</Checkbox>)}
            //                     <Button loading={this.props.isLoading} type="primary" htmlType="submit" className="login-form-button">
            //                         登录
            // </Button>
            //                 </Form.Item>
            //             </Form>
            //         </Card>
            //     </div>
        )
    }
}

export default Login